<!DOCTYPE html>
<html>

<head>
    <title>div样式</title>
    <meta charset="utf-8">
    <!-- 使用CSS样式来控制div布局 -->
    <style>
        /*全局选择器*/
        
        * {
            margin: 0;
            padding: 0;
        }
        /*定义全局的div布局*/
        
        div#global {
            /*设置宽度，设置百分比可以根据浏览器自适应宽度*/
            width: 100%;
            /*设置高度，950px是设置是实体高度，不能自适应的*/
            height: 800px;
            /*设置背景颜色，方便区分布局*/
            background-color: silver;
        }
        /*定义头部布局，前面的div可以不用写，#号前面默认有个id，凡事定义了id的标签，都可以用#号来表示*/
        
        #heading {
            width: 100%;
            height: 100px;
            background-color: #BB80F7;
        }
        
        #content_menu {
            width: 20%;
            height: 700px;
            background-color: #C5E9F3;
            /*定义浮动，不定义的话，界面会乱*/
            float: left;
        }
        
        #content_body {
            width: 80%;
            height: 700px;
            background-color: #F7575d;
            float: right;
        }
        
        #floor {
            /*删除浮动，不然会被其他的浮动给遮住*/
            clear: both;
            height: 100px;
            background-color: #8080FF
        }
    </style>
</head>

<body>
    <!-- 在这里控制全局的页面，定义div的id是"global" -->
    <div id="global">
        <div id="heading">我是头部的布局</div>
        <div id="content_menu">我是正文部分，我想去左边的菜单呆着</div>
        <div id="content_body">我是正文部分</div>
        <div id="floor">我在最下面，抢不到沙发，坐个地板可以吧</div>
    </div>
</body>

</html>